<template>
  <div class="main">
    <Navigation></Navigation>

    <img v-if="showjsz" style="width:1920px;height: 1080px;" src="@/assets/images/jsz.png" alt="">

    <VScrollContainer
      @scroll="scroll"
      ref="scrollContainer"
      v-else
    >
      <div class="container-list">
        <div class="head">
          <VMultiList
            @scrollFoc="scrollFoc"
            :groupDatas="groupData"
            :head="{down:'2-0',top:'100-2',right:'1-0'}"
          >
            <ul class="list">
              <li :class="['item', {active: groupData.focArr[0][index]}]"
                  v-for="(item, index) in groupData.dataArr[0].data">
                <div class="item-box">
                  <div class="title">
                    <VMarquee align="left" scrool-width="550" font-size="34" :active="groupData.focArr[0][index]">
                      {{ item.segment ? item.segment.name : item.name}}
                    </VMarquee>
                  </div>
                  <div class="info">

                    <div class="school">
                      {{item.subname}}
                    </div>

                    <div class="student">{{item.base.createUserName}}</div>
                  </div>
                  <div v-if="onselectId === '0-' + index" class="icon icon-play-dark"></div>
                  <div v-if="groupData.focArr[0][index] && onselectId === '0-' + index"
                       class="icon icon-play-light"></div>

                  <div v-if="lives[index] && liveStatus(index)" class="tip tip-live">直播中</div>
                  <div v-if="lives[index] && !liveStatus(index)" class="tip tip-order">预告</div>

                  <div class="date">{{item.base.createTime.split(' ')[0]}}</div>
                </div>
              </li>
            </ul>
          </VMultiList>
        </div>
        <div :class="['video-box', {'vb-active': group2foc}]">
          <img v-if="liveBg" class="video-box-bg" :src="liveBg" alt="">
        </div>
        <div class="process">
          <VMultiList
            @scrollFoc="scrollFoc2"
            @scrollTo="scrollTo"
            :groupDatas="groupItem"
            :groupOffset="2"
            :head="{top:'0-0'}"
          >
            <ul class="list">
              <li class="item" v-for="(item, index) in groupItem.dataArr" :key="index">
                <div class="item-left">
                  <div :class="['month', {'month-now': focarea === index + 2}]">
                    {{ item.data[0].month === month ? '本月' : item.data[0].month + '月'}}
                  </div>

                </div>
                <div class="item-right">
                  <div class="item-up">
                    <div :class="['circle', {'circle-now': focarea === index + 2}]"></div>
                    <div class="date-info">{{timeFormate(item.data[0].createTime)}}</div>
                    <div class="date-line"></div>
                  </div>

                  <div :class="['line', {'line-now': focarea === index + 2}]">
                    <div class="question-list">
                      <div :class="['item', {active: groupItem.focArr[index][indexc]}]"
                           v-for="(itemc, indexc) in item.data"
                           :key="itemc.assetId"
                           :data-index="'tar_'+ (2 + index )+ '_'+indexc"
                      >
                        <div class="item-box">
                          <div class="title">
                            <VMarquee align="content" scrool-width="535" font-size="34"
                                      :active="groupItem.focArr[index][indexc]">
                              {{itemc.segment.name}}
                            </VMarquee>
                          </div>
                          <div class="info">
                            <div class="school"></div>
                            <div class="student"></div>
                          </div>
                          <div class="date">{{item.data[0].createTime}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </VMultiList>
        </div>
      </div>
    </VScrollContainer>
  </div>
</template>
<script>
  import Navigation from "@/components/Navigation";
  import mixinCommon from "@/assets/js/mixin-common"

  export default {
    name: "yckt",
    mixins: [mixinCommon],
    components: {
      Navigation
    },
    data() {
      return {
        prevStb: "",
        groupData: {
          dataArr: [{
            maxLine: 1,
            dynamic: false,
            title: "",
            data: []
          }],
          focArr: [
            []
          ]
        },
        groupItem: {
          dataArr: [],
          focArr: []
        },
        month: 1,     //当前月份
        focarea: 0,   // 获焦区域
        lives: [],     // 直播
        onselectId: '', // 获焦id
        groups: [0, 1], // 区域
        group2foc: false,
        liveBg: '' // 不在直播中的预热图
      }
    },
    computed: {
      timeFormate: function () {
        return function (time) {
          // console.log(time);
          return time.substring(0, 7)
        }
      },
      timeFormate2: function () {
        return function (time) {
          // console.log(time);
          let year = time.substring(0, 4)
          let month = time.substring(4, 6)
          let day = time.substring(6, 8)
          return year + '-' + month + '-' + day
        }
      },
      liveStatus: function () {
        return function (index) {
          // console.log(time);
          return this.lives[index].status === 1
        }
      },
      showjsz: function () {
        return this.lives.length === 0 && this.groupItem.dataArr.length === 0
      }
    },
    methods: {
      scrollTo(targetIndex) {
        console.log('scrollTo:' + targetIndex);
        // let area = targetIndex ? targetIndex.split('_')[0] : null
        // let index = targetIndex ? targetIndex.split('_')[1] : null
        // if (area == 2 && index < 10) {
        //   this.$refs.scrollContainer.$refs.scroll.scrollTo(0, -812.76, 1200);
        //   this.$store.commit("setNavigationShow", false);
        // } else {
        this.$refs.scrollContainer.scrollTo(targetIndex, false, -813);
        // }
      },
      scrollFoc(obj) {
        this.focarea = obj.group
        this.$refs.scrollContainer.$refs.scroll.scrollTo(0, 0, 1200);
        this.$store.commit("setAppBg", this.$store.state.appBgInfo.yckt);
        this.$store.commit("setNavigationShow", true);
        if (this.onselectId && !this.bridge.playState) this.startLive(this.onselectId.split('-')[1]) // 从下返回上的时候
      },
      scrollFoc2(obj) {
        this.focarea = obj.group
        this.$store.commit("setAppBg", this.$store.state.appBgInfo.default);
        // 暂停所有live
        this.lives.forEach((ele, index) => {
          this.lives[index].closeExecFlag()
        })
        // 关闭视频
        this.bridge.closeVedio();
      },
      startLive(objindex) {
        // 关闭视频
        this.bridge.closeVedio();
        this.liveBg = ''

        if (this.groupData.dataArr[0].data[objindex]) {
          if (this.groupData.dataArr[0].data[objindex].isPlaybsack) { // 处理回放
            // 暂停所有live
            this.lives.forEach((ele, index) => {
              this.lives[index].closeExecFlag()
            })

            this.goPlay(
              this.prevStb,
              this.groupData.dataArr[0].data[objindex].contentId,
              this.groupData.dataArr[0].data[objindex].contentType
            );
          } else {  // 处理视频直播
            this.$store.commit("setLive", {
              defaultImg: this.groupData.dataArr[0].data[0].more.defaultImg
            });
            this.lives[objindex].closeExecFlag()
            this.lives[objindex].startExecFlag()
            // 执行live 当不在直播中,放置预热图
            if (this.lives[objindex].status !== 1) {
              this.liveBg = this.groupData.dataArr[0].data[objindex].more.prepareImg.fhd
            }
          }
        }
      },
      getData() {
        let listSize;
        // 获取素材.
        this.hs.ajax.get(
          "http://" + this.$store.state.domain + "/SMSCH-STB/column/find?columnId=40",
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code === 1) {
              listSize = data.body.listSize;
              this.hs.ajax.get(
                "http://" + this.$store.state.domain + "/SMSCH-STB/material/list" +
                "?columnId=" + data.body.id +
                "&pageNum=1&pageSize=" + listSize +
                "&schoolId=" + this.$store.state.school.id,
                data => {
                  data = JSON.parse(data);
                  console.log(data);
                  if (data.head.code === 1) {
                    this.groupData.dataArr[0].data = data.body.filter((item) => {
                      return item.more.status !== 2;
                    })
                  }
                }, 0,
                function (msg) {
                },
                3000
              );
            }
          }, 0,
          function (msg) {
          },
          3000
        );

        // 生成所有直播对象, 设置状态只是单纯获取直播状态 execFlag: false,
        if (this.groupData.dataArr[0].data.length) {
          this.groupData.dataArr[0].data.forEach((item, index) => {
            this.lives.push(new this.hs.listenLive())
            this.lives[index].start({
              beforeTime: this.groupData.dataArr[0].data[index].more.prepareTime,
              startTime: this.groupData.dataArr[0].data[index].more.startTime,
              endTime: this.groupData.dataArr[0].data[index].more.endTime,
              afterTime: this.groupData.dataArr[0].data[index].more.finalTime,
              playUrl: this.groupData.dataArr[0].data[index].more.startStbUrl,
              beforeImg: this.groupData.dataArr[0].data[index].more.prepareImg.fhd,
              errorFlag: this.groupData.dataArr[0].data[index].more.status, // 0正常 1插播 -1异常 2关闭
              delayTime: this.groupData.dataArr[0].data[index].more.delay,
              execFlag: false,
              bridge: this.bridge,
              store: this.$store,
              vedioInfo: {
                content: "1920*1080",
                offsetLeft: 839,
                offsetTop: 259,
                width: 937,
                height: 528
              }
            });
          })
        }

        //  获取回放资产
        this.hs.ajax.get(
          "http://" + this.$store.state.domain + "/SMSCH-STB/material/list" +
          "?columnId=43" +
          "&pageNum=1&pageSize=" + 100 +
          "&schoolId=" + this.$store.state.school.id,
          data => {
            data = JSON.parse(data);
            console.log(data);
            if (data.head.code === 1) {
              this.prevStb = data.body[0].more.url;
            }
          }, 0,
          function (msg) {
          },
          3000
        );

        if (this.prevStb) {
          // 获取当前月份
          this.getTime()

          // 获取回放数据
          let url =
            "http://ips-4k.hzdtv.tv/dataquery/folderContents?folderCode=" +
            this.prevStb +
            "&fields=viewpoints&pageItems=20&cImageMode=554,214,JPG&segmentIndex=1&pageIndex=1";
          this.hs.ajax.post(
            "http://125.210.113.145/WSL/Core/CrossDomain.ashx",
            "url=" + encodeURIComponent(url) + "&data=&method=get&type=default",
            obj => {
              obj = JSON.parse(obj);
              console.log(obj);
              if (obj.contents.length > 0) {
                // 处理回放数据,和焦点
                for (let i = 0; i < obj.contents.length; i++) {
                  // 格式化时间
                  obj.contents[i].createTime = this.timeFormate2(obj.contents[i].createTime.substring(0, 8))
                  // 增加月份属性
                  obj.contents[i].month = obj.contents[i].createTime.split('-')[1]

                  // 增加回放标识符
                  obj.contents[i].isPlaybsack = true

                  // 添加作者
                  obj.contents[i].base = {createUserName: ''}

                  // 添加创建实践
                  obj.contents[i].base.createTime = obj.contents[i].createTime

                  // 添加subname  学校
                  obj.contents[i].subname = ''

                  let dataArr = this.groupItem.dataArr
                  let focArr = this.groupItem.focArr

                  if (dataArr.length === 0 || obj.contents[i].createTime.substring(0, 4) !== dataArr[dataArr.length - 1].data[0].createTime.substring(0, 4)) {
                    // if (dataArr.length === 0 || obj.contents[i].createTime !== dataArr[dataArr.length - 1].data[0].createTime) {
                    dataArr.push({
                      maxLine: 2,
                      dynamic: false,
                      title: "",
                      data: [obj.contents[i]]
                    })
                    focArr.push([false])
                    this.groups.push((this.groups[this.groups.length - 1] + 1))
                  } else {
                    dataArr[dataArr.length - 1].data.push(obj.contents[i])
                    focArr[focArr.length - 1].push(false)
                  }
                }
                // console.log(this.groupItem);
              }
            }, 0,
            function (msg) {
            }, 3000);
        }

        // 当直播不足4条, 拿回放填充
        let areaLength = this.groupData.dataArr[0].data.length
        if (areaLength < 4 && this.groupItem.dataArr.length > 0) {
          this.groupData.dataArr[0].data = this.groupData.dataArr[0].data.concat(this.groupItem.dataArr[0].data.slice(0, (4 - areaLength)))
        }
      },
      getTime() {
        this.hs.ajax.get(
          'http://125.210.113.145/WSL/Core/DateFormat.ashx?style=40',
          (obj) => {
            obj = JSON.parse(obj);
            console.log(obj);
            if (obj.Success == true) {
              this.month = obj.Data.DateFormat.split(' ')[0].split(['-'])[1]
            }
          },
          0,
          3000
        );
      },
      goPlay(folderCode, contentId, contentType) {
        // this.$store.commit("setAppShow", false);
        let url =
          "http://ips-4k.hzdtv.tv/dataquery/gotoAuthPlay?folderCode=" + folderCode +
          "&contentId=" + contentId +
          "&contentType=" + contentType;
        this.hs.ajax.get(
          url,
          _responseText => {
            let res = JSON.parse(_responseText);
            //console.log(res);
            if (res.result == "0" || res.result == 0) {
              if (res.authResult == 0) {
                let url =
                  "http://ips-4k.hzdtv.tv/dataquery/contentPlayUrl?folderCode=" + folderCode +
                  "&contentId=" + contentId +
                  "&contentType=" + contentType +
                  "&playUrlType=rtsp";
                this.hs.ajax.get(
                  url,
                  _responseText => {
                    let res = JSON.parse(_responseText);
                    //console.log(res);
                    // this.bridge.gotoApplication2play(res.playUrl);
                    this.$store.commit('setVideoInfo', {
                      content: "1920*1080",
                      offsetLeft: 839,
                      offsetTop: 259,
                      width: 937,
                      height: 528
                    });
                    this.bridge.movies = [res.playUrl];
                    this.bridge.countFlag = 0;
                    this.bridge.initPlay();
                  },
                  0,
                  3000
                );
              } else {
                this.bridge.gotoApplication2order({
                  ppvId: res.ppvId,
                  columnAlias: this.folderCode
                });
              }
            }
          }, 0, 3000
        );
      },
      goPlay2(folderCode, contentId, contentType) {
        // this.$store.commit("setAppShow", false);
        let url =
          "http://ips-4k.hzdtv.tv/dataquery/gotoAuthPlay" +
          "?folderCode=" + folderCode +
          "&contentId=" + contentId +
          "&contentType=" + contentType;
        this.hs.ajax.get(
          url,
          _responseText => {
            let res = JSON.parse(_responseText);
            //console.log(res);
            if (res.result == "0" || res.result == 0) {
              if (res.authResult == 0) {
                let url =
                  "http://ips-4k.hzdtv.tv/dataquery/contentPlayUrl" +
                  "?folderCode=" + folderCode +
                  "&contentId=" + contentId +
                  "&contentType=" + contentType +
                  "&playUrlType=rtsp";
                this.hs.ajax.get(
                  url,
                  _responseText => {
                    let res = JSON.parse(_responseText);
                    this.bridge.gotoApplication2play(res.playUrl);
                  },
                  0,
                  3000
                );
              } else {
                this.bridge.gotoApplication2order({
                  ppvId: res.ppvId,
                  columnAlias: this.folderCode
                });
              }
            }
          }, 0, 3000
        );
      }
    },
    created() {
      this.getData()
      this.wasuLog(this.$route.path, '远程课堂')
    },
    mounted() {
      this.hs.initFocus("100-2");

      if (this.showjsz) this.$store.commit("setAppBg", this.$store.state.appBgInfo.default);

      new fObject(1, 0, null, '100-2', '2-0', '0-0', null)
      this.hs.fObjCommit()
      this.hs.addFocus([1], () => {
        this.group2foc = true
      })
      this.hs.addBlur([1], () => {
        this.group2foc = false
      })

      this.hs.addSelect(this.groups, (group, objid, objindex) => {
        if (group === 0) {
          if (this.onselectId === objid) return
          this.onselectId = objid
          this.startLive(objindex)
        } else if (group === 1) {
          if (this.bridge.playState === true) this.bridge.fullScreen()
        } else {
          // 暂停所有live
          this.lives.forEach((ele, index) => {
            this.lives[index].closeExecFlag()
          })

          this.goPlay2(
            this.prevStb,
            this.groupItem.dataArr[group - 2].data[objindex].contentId,
            this.groupItem.dataArr[group - 2].data[objindex].contentType
          );
        }
      });

      this.execBackFocObjPage([false])

      // let initIndex = 0
      // let selectId = '0-0'
      // // console.log('当前area:' + this.hs.focArea);
      // if (this.hs.focArea === 0 || this.hs.focArea === 100) {
      //   if (this.hs.focArea === 0) {
      //     initIndex = this.focObj.objindex
      //     selectId = this.focObj.objid
      //   }
      // }

      setTimeout(() => {
        if (this.isOnPage && this.hs.focObj.objid === '100-2') {
          this.startLive(0)
          this.onselectId = '0-0'
        }
      }, 1100);

      this.bridge.whenKeyBack = () => {
        if (this.$store.state.appShow) {
          // 当页面显示的时候就返回首页, 隐藏的时候, 就显示页面
          this.$bridge.callHandler(
            "wasu_function_gotoApplication",
            {
              packageName: "com.wasu.launcher",
              className: "com.wasu.launcher.MainActivity"
            },
            function (response) {
            }
          );
        } else {
          this.$store.commit("setAppShow", true);
        }
      };
    },
    beforeDestroy() {
      //console.log("beforeDestroy");
      this.bridge.closeVedio()
      //  销毁定时器
      this.lives.forEach((ele, index) => {
        this.lives[index].destroyTime();
      })
    }
  };
</script>

<style scoped lang="less">
  .main {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    display: flex;
    overflow: hidden;

    .content {
      width: 1920px;
      height: 1080px;
    }

    .container-list {
      min-height: 1890px;
      padding-top: 259px;
      margin: 0 125px;

      .head {
        width: 657px;
        height: 528px;
        border-radius: 8px;
        position: relative;

        .list {
          position: absolute;
          left: 24px;
          top: 0px;
          width: 647px;
          height: 528px;

          .item {
            width: 100%;
            height: 120px;
            list-style: none;
            background: #74c1e5;
            border-radius: 8px;
            margin-top: 16px;

            .item-box {
              position: relative;
              width: 100%;
              height: 100%;

              .title {
                font-size: 34px;
                text-align: left;
                position: absolute;
                left: 60px;
                top: 18px;
                color: #414141;
                width: 500px;
                height: 34px;
                line-height: 34px;
                overflow: hidden;
                white-space: nowrap;
              }

              .info {
                position: absolute;
                text-align: left;
                left: 60px;
                bottom: 18px;
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: center;
                color: #414141;
                opacity: 0.8;
                text-align: left;
                font-size: 24px;
                overflow: hidden;
                width: 450px;

                .school {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                }

                .student {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  margin-left: 20px;
                }
              }

              .icon {
                position: absolute;
                left: 17px;
                top: 42px;
                width: 36px;
                height: 36px;
              }

              .icon-play-dark {
                background: url("../../assets/images/yckt/play_1.png") no-repeat center / contain;
              }

              .icon-play-light {
                background: url("../../assets/images/yckt/play_2.png") no-repeat center / contain;
              }

              .tip {
                position: absolute;
                right: 18px;
                top: 18px;
                font-size: 20px;
                color: #fff;
                border-radius: 3px;
                padding: 0 3px;
                box-sizing: border-box;
              }

              .tip-live {
                background: #f00;
              }

              .tip-order {
                background: #de7e20;
              }

              .date {
                position: absolute;
                right: 18px;
                bottom: 17px;
                color: #414141;
                font-size: 24px;
              }
            }
          }

          .item:first-child {
            margin-top: 0;
          }

          .active {
            background-color: #0e60e9;
            border: solid 2px #ffffff;
            transform: scale(1.1);
            -webkit-transform: scale(1.1);

            .item-box {
              .title {
                color: #fff;
              }

              .info {
                .school, .student {
                  color: #fff;
                }
              }

              .date {
                color: #fff;
              }
            }
          }
        }

      }

      .video-box {
        width: 942px;
        height: 533px;
        position: absolute;
        left: 836px;
        top: 256px;
      }

      .process {
        width: 1680px + 40px * 2;
        /*height: 100%;*/
        margin: 60px auto;

        .list {
          width: 100%;
          /*height: 100%;*/
          padding: 44px 0;
          box-sizing: border-box;

          .item {
            width: 100%;
            /*height: 100%;*/
            display: flex;
            flex-flow: row nowrap;
            /*justify-content: space-between;*/
            /*align-items: center;*/

            .item-left {
              width: 170px;
              /*height: 100%;*/
              position: relative;

              .month {
                color: #093b64;
                width: 149px;
                height: 66px;
                line-height: 66px;
                border-radius: 33px;
                text-align: center;
                font-size: 38px;
                position: absolute;
                left: 5px;
                top: -20px;
                z-index: 10;
              }

              .month-now {
                background: #0e60e9;
                color: #fff;
                border: 3px solid #fff;
                text-align: center;
                font-size: 48px;
              }

            }

            .item-right {
              width: (1497px - 105px) + 40px * 2;
              /*height: 100%;*/
              margin-left: 20px;
              box-sizing: border-box;
              position: relative;

              .item-up {
                width: 1517px;
                height: 22px;

                .date-info {
                  position: absolute;
                  left: 86px;
                  color: #a8e7ff;
                  font-size: 24px;
                  height: 22px;
                  line-height: 22px;
                  width: 145px;
                }

                .circle {
                  width: 20px;
                  height: 20px;
                  background: #09508a;
                  border-radius: 50%;
                  position: absolute;
                  z-index: 10;
                }

                .circle-now {
                  width: 40px;
                  height: 40px;
                  background: rgba(#74c1e5, .8);
                  border-radius: 50%;
                  position: absolute;
                  left: -8px;
                  top: -10px;
                  z-index: 10;
                }

                .circle-now::after {
                  content: '';
                  width: 20px;
                  height: 20px;
                  background: #fff;
                  border-radius: 50%;
                  position: absolute;
                  left: 10px;
                  top: 10px;
                  z-index: 10;
                }

                .date-line {
                  position: absolute;
                  top: 12px;
                  right: 0px;
                  width: 1497px - 105px - 145px;
                  border-top: 3px dashed rgba(#a8e7ff, .6);
                }
              }

              .line {
                width: 1571px;
                /*height: 100%;*/
                border-left: #09508a 4px solid;
                position: relative;
                /*top: 20px;*/
                left: 8px;
                z-index: 5;
              }

              .line-now {
                border-left: #ffffff 6px solid;
              }

              .question-list {
                width: 1517px;
                /*height: 100%;*/
                padding: 40px 0 40px 72px;
                z-index: 100;
                box-sizing: border-box;
                display: flex;
                flex-flow: row wrap;
                align-items: start;
                overflow: hidden;

                .item {
                  width: 672px;
                  height: 140px;
                  background: #74c1e5;
                  border-radius: 8px;

                  &:nth-child(even) {
                    margin-left: 48px;
                  }

                  .item-box {
                    position: relative;
                    width: 100%;
                    height: 100%;

                    .title {
                      font-size: 34px;
                      text-align: left;
                      position: absolute;
                      left: 69px;
                      top: 25px;
                      color: #414141;
                      width: 535px;
                      height: 34px;
                      line-height: 34px;
                      overflow: hidden;
                      white-space: nowrap;
                    }

                    .info {
                      position: absolute;
                      text-align: left;
                      left: 69px;
                      bottom: 25px;
                      display: flex;
                      flex-flow: row nowrap;
                      justify-content: flex-start;
                      align-items: center;
                      color: #414141;
                      opacity: 0.8;
                      font-size: 26px;
                      overflow: hidden;
                      width: 420px;

                      .school {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                      }

                      .student {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin-left: 20px;
                      }
                    }

                    .date {
                      position: absolute;
                      right: 68px;
                      bottom: 25px;
                      color: #414141;
                      font-size: 26px;
                    }
                  }
                }

                .item:nth-child(n+3) {
                  margin-top: 48px;
                }

                .active {
                  background-color: #0e60e9;
                  border: solid 2px #ffffff;
                  transform: scale(1.1);
                  -webkit-transform: scale(1.1);

                  .item-box {
                    .title {
                      color: #fff;
                    }

                    .info {
                      .school, .student {
                        color: #fff;
                      }
                    }

                    .date {
                      color: #fff;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .vb-active {
        border: solid 2px #ffffff;
      }
    }
  }
</style>
